<template>
  <div class="va-df-checkboxgroup">
    <input-checkbox v-for="cb in checkboxList" :key="cb.field.label" :disabled="cb.field.disabled" :field="cb.field" :value="cb.value" @input="itemChange($event, cb)"></input-checkbox>
  </div>
</template>

<script>
  import _ from 'lodash'
  import Vue from 'vue'
  import InputCheckbox from './InputCheckbox.vue'

  /*
  * field配置
  *   itemLabelProp 如果不配置，是直接是dataSource项的值
  *   itemValueProp 如果不配置，是直接是dataSource项的值
  *   single 是否是单选
  *   dataSource
  *   itemDisabled: function(item):boolean 可以通过此函数来决定哪些项是disabled的
  *   disabled
  * */
  export default {
    components: {InputCheckbox},
    props: {
      value: {
        default: false
      },
      disabled: {
        type: Boolean,
        default: false
      },
      dataSource: {
        type: Array,
        default () {
          return []
        }
      },
      field: {
        default () {
          return {}
        }
      }
    },
    data () {
      return {
        // {value, field}
        checkboxList: null
      }
    },
    mounted () {
      this.updateComponents()
    },
    methods: {
      itemChange (value, checkbox) {
        let checked = checkbox.field.trueValue === value
        if (this.field.single) {
          this.$emit('input', checked ? checkbox.field.trueValue : checkbox.field.falseValue)
        } else {
          let arr = [...(this.value || [])]
          for (let i = 0; i < arr.length; i++) {
            if (arr[i] === checkbox.field.trueValue) {
              arr.splice(i, 1)
              i--
            }
          }
          if (checked) {
            arr.push(value)
          }
          if (!_.isEqual(this.value, arr)) {
            this.$emit('input', arr)
          }
        }
      },
      updateComponents () {
        if (this.dataSource && this.dataSource.length > 0 && this.checkboxList === null) {
          let list = []
          for (let item of this.dataSource) {
            let field = {}
            field.trueValue = this.field.itemValueProp ? _.get(item, this.field.itemValueProp) : item
            field.falseValue = undefined
            field.label = this.field.itemLabelProp ? _.get(item, this.field.itemLabelProp) : item
            if (_.isFunction(this.field.itemDisabled)) {
              field.disabled = this.disabled || this.field.itemDisabled(item)
            } else if (!_.isNil(this.field.itemDisabled)) {
              field.disabled = this.disabled || this.field.itemDisabled
            }
            list.push({field})
          }
          this.checkboxList = list
        }
        if (this.field.single) {
          if (this.checkboxList) {
            for (let cb of this.checkboxList) {
              Vue.set(cb, 'value', undefined)
            }
            for (let cb of this.checkboxList) {
              if (this.value === cb.field.trueValue) {
                Vue.set(cb, 'value', this.value)
              }
            }
          }
        } else {
          if (this.value && _.isArray(this.value) && this.checkboxList) {
            for (let cb of this.checkboxList) {
              Vue.set(cb, 'value', undefined)
            }
            for (let cb of this.checkboxList) {
              for (let val of this.value) {
                if (val === cb.field.trueValue) {
                  Vue.set(cb, 'value', val)
                }
              }
            }
          }
        }
      }
    },
    watch: {
      value () {
        this.updateComponents()
      },
      dataSource () {
        this.updateComponents()
      }
    }
  }
</script>
